<template>
  <div>
    <div class="header">欢迎来到报班管理系统</div>
    <div class="title">驾驶员信息统计</div>
    <a-row justify="start">
      <a-col :span="5">
        <a-card :style="zstyle" title="申请数量" :headStyle="tstyle" :bordered="false">
          <p>{{ sumCount }}</p>
        </a-card>
      </a-col>
      <a-col :span="5" :offset="1">
        <a-card :style="zstyle1" title="已审核数量" :headStyle="tstyle1" :bordered="false">
          <p>{{ confirmCount }}</p>
        </a-card>
      </a-col>
      <a-col :span="5" :offset="1">
        <a-card :style="zstyle2" title="待审核数量" :headStyle="tstyle2" :bordered="false">
          <p>{{ unconfirmCount }}</p>
        </a-card>
      </a-col>
      <a-col :span="5" :offset="1">
        <a-card :style="zstyle3" title="已驳回数量" :headStyle="tstyle3" :bordered="false">
          <p>{{ refuseCount }}</p>
        </a-card>
      </a-col>
    </a-row>
    <div class="title">驾驶员报班数量统计</div>
    <a-row type="flex" justify="start">
      <a-col :span="5">
        <a-card :style="zstyle4" title="报班总数" :headStyle="tstyle4" :bordered="false">
          <p>{{ reportSumCount }}</p>
        </a-card>
      </a-col>
      <a-col :span="5" :offset="1">
        <a-card :style="zstyle5" title="当天报班数量" :headStyle="tstyle5" :bordered="false">
          <p>{{ reportCurrentCount }}</p>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { getWatch } from '@/api/shifts/driverinfo'
export default {
  data () {
    return {
      zstyle: { 'background': 'rgb(19, 172, 169)' },
      tstyle: { 'font-size': '18px', 'background': 'rgb(19, 172, 169)', 'color': 'white' },
      zstyle1: { 'background': 'rgb(59, 126, 194)' },
      tstyle1: { 'font-size': '18px', 'background': 'rgb(59, 126, 194)', 'color': 'white' },
      zstyle2: { 'background': 'rgb(44, 168, 96)' },
      tstyle2: { 'font-size': '18px', 'background': 'rgb(44, 168, 96)', 'color': 'white' },
      zstyle3: { 'background': 'rgb(164, 83, 150)' },
      tstyle3: { 'font-size': '18px', 'background': 'rgb(164, 83, 150)', 'color': 'white' },
      zstyle4: { 'background': '#e7a404' },
      tstyle4: { 'font-size': '18px', 'background': '#e7a404', 'color': 'white' },
      zstyle5: { 'background': '#f55b32' },
      tstyle5: { 'font-size': '18px', 'background': '#f55b32', 'color': 'white' },
      confirmCount: '',
      sumCount: '',
      refuseCount: '',
      reportCurrentCount: '',
      reportSumCount: '',
      unconfirmCount: ''
    }
  },
  created () {
    getWatch().then(res => {
      this.confirmCount = res.rows[0].confirmCount
      this.refuseCount = res.rows[0].refuseCount
      this.reportCurrentCount = res.rows[0].reportCurrentCount
      this.reportSumCount = res.rows[0].reportSumCount
      this.sumCount = res.rows[0].sumCount
      this.unconfirmCount = res.rows[0].unconfirmCount
    })
  },
  methods: {
    create () {
      getWatch().then(res => {
        // this.confirmCount = res.row[0].confirmCount
        this.tabTitleList.confirmCount = res.rows[0].confirmCount
        this.tabTitleList.refuseCount = res.rows[0].refuseCount
        this.tabTitleList.reportCurrentCount = res.rows[0].reportCurrentCount
        this.tabTitleList.reportSumCount = res.rows[0].reportSumCount
        this.tabTitleList.sumCount = res.rows[0].sumCount
        this.tabTitleList.unconfirmCount = res.rows[0].unconfirmCount
      })
    }
  }
}
</script>

<style scoped>
.ant-card {
  /* padding: 10 100px; */
  height: 160px;
  line-height: 40px;
  /* border-radius: 10px; */
  text-align: center;
  font-size: 50px;
  color: white;
  border: none;
}
.header {
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.title {
  text-align: left;
  line-height: 30px;
  font-size: 15px;
  margin: 15px 0;
  font-weight: 500;
}
</style>
